<template>
  <div style="margin-bottom: 4rem;">
    <van-row v-if="list.length > 0">
      <van-sticky>
        <van-row>
          <van-cell-group inset>
            <van-field
                v-model="value"
                label="资源搜影视"
                right-icon="search"
                placeholder="搜索"
                @click-right-icon="click"
            ></van-field>
          </van-cell-group>
        </van-row>
      </van-sticky>
    </van-row>
    <van-row type="flex" justify="center" style="margin-top: 5rem;" v-if="list.length === 0"><h3>资源搜影视</h3></van-row>
    <van-row type="flex" justify="center" style="margin-top: 3rem;" v-if="list.length === 0">
      <van-cell-group inset>
        <van-field
            v-model="value"
            right-icon="search"
            placeholder="搜索"
            @click-right-icon="click"
        />
      </van-cell-group>
    </van-row>
    <van-row v-if="list.length > 0">
      <van-cell-group inset>
        <van-cell v-for="item in list" :key="item.id" @click="play(item)">
          <van-row>
            <van-tag type="primary">{{ item.name }}</van-tag>
          </van-row>
          <van-row>类型：{{ item.type }}</van-row>
          <van-row>更新时间：{{ item.last }}</van-row>
          <van-row>备注：{{ item.note }}</van-row>
          <van-row>来源：{{ item.siteName }}</van-row>
        </van-cell>
      </van-cell-group>
    </van-row>
  </div>
</template>

<script>
module.exports = {
  data() {
    return {
      value: '',
      list: []
    }
  },
  methods: {
    play(item) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中',
      });
      axios.post('/zyso/detail', {
        id: item.id,
        siteId: item.siteId
      }).then(res => {
        this.$toast.clear();
        if (res) {
          this.$emit("play-event", res);
        } else {
          this.$toast.fail('版权限制');
        }
      }).catch(err => {
        console.log(err);
        this.$toast.fail('网络异常');
      });
    },
    click() {
      let value = this.value;
      if (!value) {
        return;
      }
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中',
      });
      axios.post('/zyso/search', {
        wb: this.value
      }).then(res => {
        this.$toast.clear();
        if (res.length > 0) {
          this.list = res;
        } else {
          this.$toast.fail('暂无资源');
        }
      }).catch(err => {
        console.log(err);
      });
    },
  }
}
</script>

<style scoped>
</style>